<template>
    <el-card class="report-list">
        <el-row slot="header" :gutter="20" flex="main:center cross:center">
            <el-col :span="20">
                <M-selector :items="['time']" @onSearch="onSearch" />
            </el-col>
            <el-col :span="3">
                <el-button size="small" type="primary" @click="onUploadOrder">下载报表</el-button>
            </el-col>
        </el-row>
        <M-table :list="listData" :fields="fields" @columnClick="columnClick" @pageChange="pageChange" :pageTotal="100">
            <template v-slot:action="row">
                <el-button @click="editItem(row.data)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
            </template>
        </M-table>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            params: {
                name: ""
            },
            fields: [
                {
                    key: "number",
                    label: "编号"
                },
                {
                    key: "time",
                    label: "时间"
                },
                {
                    key: "id",
                    label: "广告消费"
                }
            ],
            listData: [
                { time: new Date(), id: 1 },
                { time: new Date(), id: 2 },
                { time: new Date(), id: 4 },
                { time: new Date(), id: 5 },
                { time: new Date(), id: 6 }
            ]
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        onSearch(params) {
            console.log(params);
        },
        getList() {},
        onAdd() {},
        onUploadOrder() {},
        editItem(row) {
            console.log("editItem", row);
        },
        columnClick(row) {
            console.log(row);
        },
        pageChange(page) {
            console.log("page:", page);
        },
        deleteUser() {
            this.$message({
                message: "这里请求api删除或者恢复用户之后刷新分页组件，列表自动更新",
                type: "success"
            });
        }
    }
};
</script>
<style lang="scss"></style>
